<template>
	<view class="pad-32r">
		<view class="tags">
			<view v-for="(item,index) in listTags">
				<view class="item-tool">
					<view class="center">
						<u--image v-if="item.src" :src="baseURL+item.src" width="120rpx" height="120rpx" radius="32rpx"></u--image>
						<view v-else class="normal-no-img"></view>
					</view>
					<view class="mar-20r-0-0">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="select-line">
			<SearchButtonVue></SearchButtonVue>
			<view class="picker-select" @click="pickerShow = true">
				<view class="select-text">{{ selectItem }}</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view class="patient">
			<PatientInfoCard 
				v-for="(item,index) in filteredPatList" 
				:key="index" 
				:patient="item"
				:on-card-click="toPage"
			/>
		</view>

		<u-picker
			:show="pickerShow"
			:columns="pickerColumns"
			@confirm="handlePickerConfirm"
			@cancel="pickerShow = false"
		></u-picker>
	</view>
</template>

<script>
	import {
		patientSelect
	} from '../../api/patient';
	import { mapGetters } from 'vuex'
	import SearchButtonVue from '../../components/SearchButton.vue';
	import PatientInfoCard from '../../components/PatientInfoCard.vue';
	
	export default {
		components: {
			SearchButtonVue,
			PatientInfoCard // 患者信息卡片
		},
		data() {
			return {
				listPatient: [],
				listTags: [{
						name: "标签管理",
						src: '/img/patientManagement/20250903111337829---tagManage-icon.png',
					},
					{
						name: "患者分组",
						src: '/img/patientManagement/20250903111402433---patientGroup-icon.png',
					}, 
					{
						name: "群发消息",
						src: '/img/patientManagement/20250903111415303---massMessage-icon.png',
					}
				],
				pickerShow:false,
				pickerColumns: [
					['全部分组', '急诊患者', '门诊患者']
				],
				selectItem: '全部分组'
			}
		},
		mounted() {
			this.init()
		},
		computed: {
			filteredPatList() {
				if (this.selectItem === '全部分组') {
					return this.listPatient;
				} else {
					return this.listPatient.filter(item => {
						return item.tags && item.tags.includes(this.selectItem);
					});
				}
			},
			...mapGetters(['baseURL']),
		},
		methods: {
			init() {
				// patientSelect({}).then(res => {
				// 	console.log(res)
				// 	this.listPatient = res;
				// })
				this.listPatient = [
					{
						patName: '张珊珊',
						patSex: "0", // 0表示女，1表示男
						patAge: 30,
						tags: ['孕妇', '急诊患者', '高血压患者']
					},
				];
			},
			toPage(item) {
				uni.$u.route('/pages/patient/PatientInfo', item);
			},
			handlePickerConfirm (item) {
				console.log('选择了：', item);
				this.selectItem = item.value[0];
				this.pickerShow = false;
			}
		}
	}
</script>

<style scoped>
	.tags {
		display: flex;
		justify-content: space-between;
	}

	.item-tool {
		text-align: center;
	}

	.normal-no-img {
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 32rpx;
	}

	.select-line {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 28rpx;
	}

	.picker-select {
		display: flex;
	}

	.select-text {
		font-size: 24rpx;
		min-width: 96rpx;
		margin-right: 6rpx;
	}
	
	.patient {
		margin-top: 20rpx;
	}
</style>